<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .indexTitle {
            font-size: 30px
        }

        .header {
            text-align: center;
        }

        .search {
            float: left;
            margin-top: 10px;
        }
        .delete {
            float: left;
            margin-top: 10px;
        }

        .conditionInput {

            margin-left: 14px;
            width: 150px;
        }

        .searchCondition {
            margin-top: 20px;
            margin-left: 50px;
        }
        .line{
            height: 10px;
        }

        .table {
            width: 90%;
            margin-left: 50px;
        }
        .itemDescCondition{
            margin-left: 75px;
        }
        .itemUomCondition{
            margin-left: 69px;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="header"><span class="indexTitle">物料管理页面</span></div>
            <!--<el-button class="search" type="primary" @click="add()">新建</el-button>-->
        </el-header>
        <!--<el-main>-->
    </el-container>

    <!-- 条件查询 -->
    <div class="searchCondition">
        <div>
        物料编码:
        <el-input class="conditionInput" v-model="input" placeholder="请输入内容"></el-input>
            <el-label size="medium" class="itemDescCondition">物料描述:</el-label>

        <el-input class="conditionInput" v-model="input2" placeholder="请输入内容"></el-input>
            <el-label class="itemUomCondition">物料单位:</el-label>

        <el-select v-model="value" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>

        </div>
        <div class="line"></div>
        <div>
        生效时间从:
        <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        生效时间至:
        <el-date-picker
                v-model="value4"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        是否启用:
        <el-select v-model="svalue" placeholder="请选择">
            <el-option
                    v-for="item in option1s"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
            <el-button @click="reset()" style="margin-left:16px">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <!--<el-button type="primary" @click="search()">查询</el-button>-->
        </div>

    </div>


    <!-- 表格显示 -->
    <div class="table">
        <el-button class="search" type="primary" @click="add()">新建</el-button>
        <el-button class="delete"  type="primary" @click="batchDelete(sels)" :disabled="this.sels.length===0">批量删除</el-button>
        <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    label="物料编码"
                    width="140">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>物料编码: {{ scope.row.itemCode }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.itemCode }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column
                    label="物料描述"
                    width="160">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>物料描述: {{ scope.row.itemDesc }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.itemDesc }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column
                    label="物料单位"
                    width="140">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>物料单位: {{ scope.row.itemUom }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.itemUom }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column
                    label="生效时间从"
                    width="150">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.startActiveDate }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="生效时间至"
                    width="150">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.endActiveDate }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="是否启用"
                    width="130">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">

                        <p v-if="scope.row.enableFlag==true">是否启用:是 </p>
                        <p v-if="scope.row.enableFlag==false">是否启用:否 </p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag v-if="scope.row.enableFlag==true" size="medium">是</el-tag>
                            <el-tag v-if="scope.row.enableFlag==false" size="medium">否</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>


                    <!-- 新增模态框 -->
                    <el-dialog :title="title" class="dialogAdd" width="600px"  :visible.sync="dialogAddgsVisible"  @close="closeDialogAddgsVisible">
                        <el-form :model="addForm" :rules="addFormRules" ref="addForm" style="margin-right: 20px;" label-position="right" label-width="110px">
                            <el-form-item label="物料描述" prop="itemDesc" >
                                <el-input   placeholder="请输入内容" v-model="addForm.itemDesc"></el-input>
                            </el-form-item>
                            <el-form-item label="物料单位" prop="itemUom" >
                                <el-select v-model="addForm.itemUom" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生效时间从" prop="startActiveDate" >
                                <el-date-picker
                                        v-model="addForm.valueStartDate"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="生效时间至" prop="endActiveDate" >
                                <el-date-picker
                                        v-model="addForm.valueEndDate"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="是否启用" prop="enableFlag" >

                                <el-select v-model="addForm.enableFlag" placeholder="请选择">
                                    <el-option
                                            v-for="item in option1s"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>

                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="dialogAddgsVisible = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="saveAddForm">确 定</el-button>
                        </div>
                    </el-dialog>



                    <!-- 编辑模态框 -->
                    <el-dialog :title="title" class="dialogEdit" width="600px"  :visible.sync="dialogEditgsVisible"  @close="closeDialogEditgsVisible">
                        <el-form :model="editForm" :rules="editFormRules" ref="editForm" style="margin-right: 20px;" label-position="right" label-width="110px">
                            <el-form-item label="物料编码"  prop="itemCode">
                                <el-input   placeholder="请输入内容" v-model="editForm.itemCode"></el-input>
                            </el-form-item>
                            <el-form-item label="物料描述" prop="itemDesc" >
                                <el-input   placeholder="请输入内容" v-model="editForm.itemDesc"></el-input>
                            </el-form-item>
                            <el-form-item label="物料单位" prop="itemUom" >
                                <el-select v-model="editForm.itemUom" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生效时间从" prop="startActiveDate" >
                                <el-date-picker
                                        v-model="editForm.valueStartDate"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="生效时间至" prop="endActiveDate" >
                                <el-date-picker
                                        v-model="editForm.valueEndDate"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="是否启用" prop="enableFlag" >
                                <el-select v-model="editForm.enableFlag" placeholder="请选择">
                                    <el-option
                                            v-for="item in option1s"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>

                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="dialogEditgsVisible = false">关闭</el-button>
                            <el-button size="mini" type="primary" @click="saveEditForm">更新</el-button>
                        </div>
                    </el-dialog>





                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background

                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,20,40]"

                :page-size="pageSize"
                layout="total,sizes,prev, pager, next,jumper"
                :total="total">
        </el-pagination>
    </div>

    </el-main>

</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [{
                    // itemCode: 'ITEM0000000602',
                    // itemDesc: 'DL01-14-A00 电源线',
                    // itemUom: '米',
                    // startActiveDate: '2019-07-01',
                    // endActiveDate: '2019-07-01',
                    // enableFlag: '是'
                }],
                options: [{
                    value: '米',
                    label: '米'
                }, {
                    value: '平方米',
                    label: '平方米'
                }, {
                    value: '立方米',
                    label: '立方米'
                }, {
                    value: '千克',
                    label: '千克'
                }, {
                    value: '个',
                    label: '个'
                }, {
                    value: '其他',
                    label: '其他'
                }],
                value: '',
                value1: '',
                value4: '',
                input: '',
                input2: '',
                svalue: '',
                option1s: [{
                    value: 'true',
                    label: '是'
                }, {
                    value: 'false',
                    label: '否'
                }],
                currentPage:1,
                pageSize:10,
                total:20,

                addForm:{
                    itemUom:'',
                    itemDesc:"",
                    valueStartDate:"",
                    valueEndDate:"",
                    enableFlag:"",
                    option1s: [{
                        value: 'true',
                        label: '是'
                    }, {
                        value: 'false',
                        label: '否'
                    }],
                },

                editForm:{
                    itemId:"",
                    itemCode:"",
                    itemUom:'',
                    itemDesc:"",
                    valueStartDate:"",
                    valueEndDate:"",
                    enableFlag:""
                },
                dialogAddgsVisible:false,
                dialogEditgsVisible:false,
                title:'',
                addFormRules:{

                },
                editFormRules:{

                },
                sels:[],
                ids:[]
            }
        },
        created() {
            console.log("初始化")
            this.getList(this.currentPage,this.pageSize)
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

            getList(currentPage,pageSize){
                axios.get("http://localhost:8080/item/findAll?currentPage="+currentPage+"&pageSize="+pageSize)
                    .then((res)=> {
                        console.log("分页进来没")
                    console.log(res.data.extend.pageInfo.total)
                    this.tableData = res.data.extend.pageInfo.list
                this.total=res.data.extend.pageInfo.total
            }).
                catch((error)=> {
                    console.log(error)
            })
                ;
            },

            add() {
                console.log("add")
                this.dialogAddgsVisible=true;
            },
            deleteAll(){
                console.log("delete")
            },
            search() {
                console.log("search")
                axios.get("http://localhost:8080/item/findAllByCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,{
                    params:{
                        itemCode:this.input,
                        itemDesc:this.input2,
                        // itemDesc:"biubiu",
                        itemUom:this.value,
                        startActiveDate:this.value1,
                        endActiveDate:this.value4,
                        enableFlag:this.svalue
                    }
                })
                    .then((res)=>{
                        console.log("查询成功")
                        console.log(res.data.extend.pageInfo.list)
                        console.log("------------")
                this.total=res.data.extend.pageInfo.total
                this.tableData=res.data.extend.pageInfo.list
                })

            },
            reset() {
                console.log("reset")
                this.input=''
                this.input2=''
                this.value=''
                this.value1=''
                this.value4=''
                this.svalue=''

            },

            // 编辑，弹出模态框
            handleEdit(index, row) {
                console.log(index, row);
                this.getItemById(row.itemId)
                this.dialogEditgsVisible = true;
                this.editForm.itemId=row.itemId

            },

            getItemById(itemId){
                axios.get("http://localhost:8080/item/selectItemById?itemId="+itemId)
                    .then((res)=>{
                    console.log(res.data.extend.item.itemCode)
                    console.log(res.data.extend.item.enableFlag)
                    this.editForm.itemCode=res.data.extend.item.itemCode
                this.editForm.itemUom=res.data.extend.item.itemUom
                this.editForm.itemDesc=res.data.extend.item.itemDesc
                this.editForm.valueStartDate=res.data.extend.item.startActiveDate
                this.editForm.valueEndDate=res.data.extend.item.endActiveDate
                // 自身带有判断
                if (res.data.extend.item.enableFlag){
                    console.log("是")
                    this.editForm.enableFlag='是'
                } else {
                    console.log("否")
                    this.editForm.enableFlag='否'
                }

            })
            },

            handleDelete(index, row) {
                console.log("删除")
                let itemId = row.itemId;
                console.log(itemId)

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("进来没")

                axios.post('http://localhost:8080/item/deleteItemById', {
                		'itemId':itemId
                	})
                	.then((res) => {
                	    console.log("输出")
                		console.log(res.data);
                	    if (res.data.code==100){
                	        this.$message.success(res.data.msg)
                            this.getList(this.currentPage,this.pageSize)
                        } else{
                	        this.$message.error(res.data.message)
                        }
                	})
                	.catch((error) => {
                	    console.log("错误信息")
                		console.log(error);
                	});


            }).catch(() => {
                    console.log("进来了")
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

            },

            // 初始化每页数据
            handleSizeChange(size){
                this.pageSize=size;
                console.log(this.pageSize)
                this.getList(this.currentPage,size)
            },
            // 初始化当前页
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                console.log(this.currentPage)
                this.getList(currentPage,this.pageSize)
            },

            closeDialogAddgsVisible(){
                console.log("关闭或取消弹框")
                this.$refs['addForm'].resetFields()
                this.addForm.valueStartDate=''
                this.addForm.valueEndDate=''
            },
            closeDialogEditgsVisible(){
                console.log("关闭或取消弹框")
            },



            saveAddForm() {
                this.$refs.addForm.validate(valid => {
                    if (valid) {
                        let params = {
                            itemId: this.addForm.itemId,
                            itemCode: this.addForm.itemCode,
                            itemDesc: this.addForm.itemDesc,
                            itemUom: this.addForm.itemUom,
                            startActiveDate:this.addForm.valueStartDate,
                            endActiveDate:this.addForm.valueEndDate,
                            enableFlag:this.addForm.enableFlag
                        };
                        axios.post('http://localhost:8080/item/insertItem',params)
                                .then((res)=>{
                                    console.log("插入新的物料")
                                    if (res.data.code=100){
                                        this.$message.success(res.data.msg)
                                        this.dialogAddgsVisible = false
                                        this.handleCurrentChange(1);
                                    } else{
                                        this.$message.error(res.data.message)
                                    }
                            });
                    }
                });
            },

            saveEditForm(){
                this.$refs.editForm.validate(valid => {
                    if (valid) {
                        let params = {
                            itemId: this.editForm.itemId,
                            itemCode: this.editForm.itemCode,
                            itemDesc: this.editForm.itemDesc,
                            itemUom: this.editForm.itemUom,
                            startActiveDate:this.editForm.valueStartDate,
                            endActiveDate:this.editForm.valueEndDate,
                            enableFlag:this.editForm.enableFlag
                        };
                        axios.post("http://localhost:8080/item/updateItem",params)
                            .then((res)=>{
                                this.$message.success("修改成功")
                                this.dialogEditgsVisible = false
                                this.handleCurrentChange(1);
                        })
                    }
                });
            },

            handleSelectionChange(val) {
                console.log("批量删除",val)
                this.sels=val
            },

            //批量删除
            batchDelete(sels){
                var ids = this.ids
                console.log("选中",sels[0].itemId)
                // var ids = sels.map(item=>item.id).join()
                sels.forEach(element=>{
                    ids.push(element.itemId)
                })
                console.log("获取id",ids)
                this.$confirm('是否确认此操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("进入后台")
                    axios.post("http://localhost:8080/item/batchDelItem",{"idsList":ids})
                    .then((res)=>{
                    if(res.data.code=='100'){
                        console.log("批量删除")
                    this.$message.success("操作成功")
                    this.getList(this.currentPage,this.pageSize)
                    console.log("重新刷新")
                }else{
                    this.$message.error("操作失败")
                }
            })

            }).catch(() => {
                    alert(2)
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
            },

        },
    })
</script>
</html>